<template>
    <div class = "playerinfomain">
        <p class= "playerinfohead"><i class="el-icon-s-promotion"> 球员详情 > {{playerinfo.city}}{{playerinfo.name}}</i></p>
     <div class="playerinfo">
            <div class="playerinformation">
                
                <div class="informationleft">
                  <img :src="playerinfo.cover" alt="">
                  <ul>
                   <li>位置 ：{{playerinfo.position}}年</li>
                   <li>身高：{{playerinfo.height}}米</li> 
                   <li>体重：{{playerinfo.weight}}公斤</li>  
                   <li>生日：{{this.dateFormat(playerinfo.birth)}}</li>
                   <li>球队：{{playerinfo.team}}</li> 
                   <li>选秀：{{playerinfo.draft}}</li> 
                   <li>国籍：{{playerinfo.country}}</li> 
                   <li>薪资：{{playerinfo.salary}}万美元</li> 
                  </ul>  
                </div>
                <span style ="display:inline-block;height:150px;border:0.5px solid rgb(238,238,238);width:0.5px;margin-left:61%;margin-top:50px"></span>
            </div>

        <div class="playerbasic">
          <p class="playerbasichead">基本数据 </p>
          <ul>
             <li> <span>{{playerbasic.score}} </span><br/>场均得分</li>
             <li> <span>{{playerbasic.rebounds}} </span> <br/>场均篮板</li>
             <li> <span>{{playerbasic.assists}} </span><br/>场均助攻</li>
             <li> <span>{{playerbasic.steals}} </span> <br/>场均抢断</li>
             <li> <span>{{playerbasic.blockedShots}} </span> <br/>场均盖帽</li>
             <li> <span>{{playerbasic.playingTime}} </span> <br/>出场时间</li>
             <li> <span>{{playerbasic.appearances}} </span> <br/>出场数</li>
             <li> <span>{{playerbasic.shotPercentage}} </span><br/>投篮命中率</li>
             <li> <span>{{playerbasic.threePercentage}} </span> <br/>三分命中率</li>
             <li> <span>{{playerbasic.freeshotPercentage}} </span> <br/>罚球命中率</li>
             <li> <span>{{playerbasic.fault}} </span><br/>场均失误</li>
             <li> <span>{{playerbasic.foul}} </span> <br/>场均犯规</li>
             <li> <span>{{playerbasic.freeshotNumber}} </span> <br/>罚球数</li>
          </ul>
         </div>
           <div class="playeradvance">
          <p class="playeradvancehead">进阶数据 </p>
          <ul>
             <li> <span>{{playeradvance.attackEfficiency}} </span><br/>进攻效率</li>
             <li> <span>{{playeradvance.defenseEfficiency}} </span> <br/>防守效率</li>
             <li> <span>{{playeradvance.trueShot}}%</span> <br/>真实命中率</li>
             <li> <span>{{playeradvance.utilization}} </span><br/>球员使用率</li>
             <li> <span>{{playeradvance.per}}%</span> <br/>球员效率值</li>
          </ul>
         </div>

         
     </div>
     
    
  

     
    </div>
</template>

<script scoped>
import player from '@/api/player'
import moment from 'moment'
import $ from 'jquery'
import index from '@/api/index'
export default {
    data() {
        return{
            playerinfo:{},
            playerbasic:{},
            playeradvance:{},
        }
      },
      mounted(){
          this.getplayerinfo()
          this.getplayerbasic()
          this.getplayeradvanced()
      },
       methods: {
            dateFormat(date){
            return moment(date).format("YYYY-MM-DD")
             },
           info(id){
                this.$router.push({ path:'/player/'+id  })
           },
           getplayerinfo(){
               player.getplayerinfo(this.$route.params.id)
               .then(response => {
                   this.playerinfo = response.data.playerInformation
                    console.log(this.playerinfo)
               })
           },
           
           getplayerbasic(){
               player.getplayerbasic(this.$route.params.id)
               .then(response =>{
                    this.playerbasic = response.data.playerBasicdate
               })
           },
             getplayeradvanced(){
               player.getplayeradvanced(this.$route.params.id)
               .then(response =>{
                    this.playeradvance = response.data.playerAdvanced
               })
           },
        }
}
</script>

<style scoped>

.playerinfohead{
    font-size:18px;
    margin-left:10%;
}
.playerinfomain{
   width:100%;
   background-color: rgb(238,238,238);
   padding-top:80px;
   display: inline-block;
   overflow: hidden;
   min-height: 1000px;
}
.el-icon-s-promotion{
    color:rgb(0,98,161)
}
.playerinfo{
   width: 60%;
   min-height:800px;
   background-color:white;
   margin-left:10%;
   box-shadow: 0 0 10px #ddd;
   margin-top: 30px;
}
.playerinformation{
    width:100%;
    border-top: 5px solid rgb(4,124,255);
}
.informationleft{
    position: relative;
    width: 90%;
    display: inline-block;
}
.informationleft img{
    position: absolute;
    width: 150px;
    left: 50px;
    top: 20px;
}
.informationleft ul{
    list-style: none;
    position: absolute;
    left: 200px;
    top: 20px;
}
.informationleft li{
    height: 30px;
    width: 100%;
}
.informationright{
    width:48%;
    display: inline-block;
    position: relative;
}
.informationright p{
    position: absolute;
  
}
>>>.el-progress-bar__innerText{
    font-size: 0;
}
>>> .el-progress-bar{
    width: 70%; 
    height:5px;
}
>>> .el-progress-bar__outer{
    background-color: rgb(223,10,23);
}
>>> .el-progress-bar__inner{
    border-radius:0;
}

.playerbasic{
    width:100%;
    min-height:200px;
    margin-top:20px
}
.playerbasichead{
  font-size: 20px;
  border-left:4px solid rgb(4,124,255);
  text-align: left;
  padding-left:8px;
  margin-left: 30px;
  margin-top:60px ;
}
.playerbasic ul{
    list-style: none;
    margin-top:20px;
}
.playerbasic li{
    float: left;
    width:100px;
    text-align:center;
    height:70px;
}
.playerbasic li span{
    font-size:20px;
    font-weight:700;
}
.playeradvance{
    width:100%;
    min-height:200px;
    margin-top:20px;
}
.playeradvancehead{
  font-size: 20px;
  border-left:4px solid rgb(4,124,255);
  text-align: left;
  padding-left:8px;
  margin-left: 30px;
  margin-top:60px ;
}
.playeradvance ul{
    list-style: none;
    margin-top:20px;
}
.playeradvance li{
    float: left;
    width:100px;
    text-align:center;
    height:70px;
}
.playeradvance li span{
    font-size:20px;
    font-weight:700;
}

.paiming{
  width: 15%;
  height: auto;
  position: absolute;
  top: 235px;
  right: 12%;
  background-color:white;
  margin-left:10%;
  box-shadow: 0 0 10px #ddd;
 border-top: 5px solid rgb(4,124,255);
}



.paiming span{
  display: block;
  float: left;
  font-size: 16px;
  width:50%;
  text-align: center;
  cursor: pointer;
  padding-top:10px;
  font-weight: 400;
}
.paiming img{
    width:35px;
    z-index: 15;
}
.bb{
  height: 1px;
  width: 100%;
  display:block;
  background-color: gainsboro;
}
>>> .el-table thead{
  display: none;
}
>>> .el-table__row td{
    border-bottom: 0;
    text-align: center;
    font-size: 13px;
    vertical-align: top;
    cursor: pointer;
    height:44px
}
#xi{
  display:none;
}
.aa{
  width: 50%;
  height: 1px;
  background-color:rgb(0,107,183);
  position: absolute;
  top: 20px;
  z-index: 5;
}
</style>